<template>
  <div>
    <vxe-toolbar custom />
    <vxe-table
      id="key"
      ref="singalTable"
      v-loading="listLoading"
      :menu-config="tableMenu"
      :scroll-x="{ enabled: false }"
      :data="list"
      column-key
      height="auto"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      resizable
      :custom-config="{ storage: true }"
    >
      <template slot="empty">
        <tableEmpty />
      </template>
      <vxe-table-column type="checkbox" width="100" align="center" />
      <vxe-table-column title="序号" type="seq" align="center" width="100" sortable />
      <vxe-table-column
        v-for="(config, index) in tableColumn"
        :key="index"
        v-bind="config"
        sortable
        align="center"
        :formatter="filterList[config.formatterTest]"
        :filters="[
          {
            data: {
              vals: [],
              sVal: '',
              fMenu: '',
              f1Type: '',
              f1Val: '',
              fMode: 'and',
              f2Type: '',
              f2Val: '',
            },
          },
        ]"
        :filter-render="{ name: 'FilterExcel' }"
      />
      <!-- <vxe-table-column
        field="deptCode"
        title="科室编号"
        align="center"
        width="300"
        sortable
      /> -->
      <!-- <vxe-table-column
        field="deptName"
        title="科室名称"
        align="center"
        width="300"
        sortable
        :filters="[
          {
            data: {
              vals: [],
              sVal: '',
              fMenu: '',
              f1Type: '',
              f1Val: '',
              fMode: 'and',
              f2Type: '',
              f2Val: '',
            },
          },
        ]"
        :filter-render="{ name: 'FilterExcel' }"
      />
      <vxe-table-column
        field="deptAbbreviation"
        title="备注"
        align="center"
        sortable
        show-overflow
      /> -->
    </vxe-table>
  </div>
</template>
<script>
import FilterExcel from '@/components/FilterExcel'
import tableEmpty from '@/components/table/empty'
import VXETable from 'vxe-table'
import Sortable from 'sortablejs'
import XEUtils from 'xe-utils'
export default {
  components: { tableEmpty },
  props: ['list', 'tableColumn', 'filterList'],

  data() {
    return {
      listLoading: false,
      indeterminate: false,
      tableHeight: null,
      tableMenu: {
        header: {
          options: [
            [
              { code: 'FIXED_LEFT_COLUMN', name: '冻结' },
              { code: 'CLEAR_FIXED_COLUMN', name: '解冻结' }
            ]
          ]
        }
      }
    }
  },
  watch: {},
  created() {
    console.log('filterList', this.filterList)
    this.createFilter()
    this.columnDrop()
  },
  methods: {
    columnDrop() {
      this.$nextTick(() => {
        const singalTable = this.$refs.singalTable
        this.sortable = Sortable.create(
          singalTable.$el.querySelector(
            '.body--wrapper>.vxe-table--header .vxe-header--row'
          ),
          {
            handle: '.vxe-header--column:not(.col--fixed)',
            onEnd: ({ item, newIndex, oldIndex }) => {
              const { fullColumn, tableColumn } = singalTable.getTableColumn()
              const targetThElem = item
              const wrapperElem = targetThElem.parentNode
              const newColumn = fullColumn[newIndex]
              if (newColumn.fixed) {
                // 错误的移动
                if (newIndex > oldIndex) {
                  wrapperElem.insertBefore(targetThElem, wrapperElem.children[oldIndex])
                } else {
                  wrapperElem.insertBefore(wrapperElem.children[oldIndex], targetThElem)
                }
                return this.$XModal.message({
                  message: '固定列不允许拖动！',
                  status: 'error'
                })
              }
              // 转换真实索引
              const oldColumnIndex = singalTable.getColumnIndex(tableColumn[oldIndex])
              const newColumnIndex = singalTable.getColumnIndex(tableColumn[newIndex])
              // 移动到目标列
              const currRow = fullColumn.splice(oldColumnIndex, 1)[0]
              fullColumn.splice(newColumnIndex, 0, currRow)
              singalTable.loadColumn(fullColumn)
            }
          }
        )
      })
    },
    createFilter() {
      // 创建一个实现Excel的筛选器
      VXETable.renderer.add('FilterExcel', {
        // 不显示底部按钮，使用自定义的按钮
        isFooter: false,
        // 筛选模板
        renderFilter(h, renderOpts, params) {
          return [<FilterExcel params={params}></FilterExcel>]
        },
        // 重置数据方法
        filterResetMethod({ options }) {
          options.forEach((option) => {
            option.data = {
              vals: [],
              sVal: '',
              fMenu: '',
              f1Type: '',
              f1Val: '',
              fMode: 'and',
              f2Type: '',
              f2Val: ''
            }
          })
        },
        // 筛选数据方法
        filterMethod({ option, row, column }) {
          const cellValue = XEUtils.get(row, column.property)
          const { vals, f1Type, f1Val } = option.data
          if (cellValue) {
            if (f1Type) {
              return cellValue.indexOf(f1Val) > -1
            } else if (vals.length) {
              // 通过指定值筛选
              return vals.includes(cellValue)
            }
          }
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.agencyTree {
  .el-input {
    width: 100% !important;
    height: 40px !important;
    .el-input__inner {
      height: 35px;
    }
  }
}
</style>
